import {Component, ViewChild} from '@angular/core';
import {FormField, FormFieldType} from "../common/constant";
import {NgForm} from "@angular/forms";
import {Store} from "@ngrx/store";
import {Utils} from "../common/utils";
import {pairwise} from "rxjs";
import {Step2} from "../store/models/step.model";

@Component({
  selector: 'app-step2',
  templateUrl: './step2.component.html',
  styleUrls: ['./step2.component.less']
})
export class Step2Component {
  formFields: FormField[] = [
    {name: 'maleClothes', label: 'male clothes', type: 'custom'},
    {name: 'femaleClothes', label: 'female clothes', type: 'custom'},
  ];
  step1Data = {
    isMale: undefined
  }
  step2Click: Boolean = false;
  // male
  maleDataList = [
    {key: 'a1', value: 'a1', disabled: false, label: '衣服'},
    {key: 'b2', value: 'b2', disabled: false, label: '裤子'},
    {key: 'c3', value: 'c3', disabled: false, label: '毛衣'},
    {key: 'd4', value: 'd4', disabled: false, label: '风衣'},
    {key: 'e5', value: 'e5', disabled: false, label: '牛仔裤'},
    {key: 'f6', value: 'f6', disabled: false, label: '羽绒服'},
  ]
  maleListSelectedValue: string[] = [];
  // female
  femaleCheckboxData = [
    {key: 'A', value: true, disabled: false, label: '衣服'},
    {key: 'B', value: false, disabled: false, label: '裤子'},
    {key: 'C', value: false, disabled: false, label: '裙子'},
    {key: 'D', value: false, disabled: false, label: '牛仔裤'},
    {key: 'E', value: false, disabled: false, label: '羽绒服'},
  ]

  constructor(
    private store: Store<{ step: any }>) {
    store.select('step').pipe(pairwise()).subscribe(([previousValue, currentValue]) => {
      if (!(previousValue.current === 0 &&
        currentValue.current === 1)) return
      console.log('执行step2')
      const res = currentValue;
      this.step1Data = res.stepData.step1
      if (res.current === 1) {
        this.init()
      }
    });
  }

  init() {
    const arr = this.femaleCheckboxData.filter(item => item.value === true).map(item => item.key)
    this.checkCheckboxStatus(arr)
  }

  ngOnInit() {
    this.step2Click = false
  }

  log(arr: string[]) {
    // data format ['A', 'B', 'C', 'E']
    // 选择A，不能选择B
    // 选择B，不能选择A
    // 同时选择A和C，不能选择D
    // 同时选择D和E，不能选择A
    // 选择C，不能选择E
    this.checkCheckboxStatus(arr)
  }

  checkCheckboxStatus(arr: string[]) {
    this.femaleCheckboxData.forEach(item => {
      item.disabled = false
    })
    let A = this.femaleCheckboxData.find(item => item.key === 'A');
    let B = this.femaleCheckboxData.find(item => item.key === 'B');
    let C = this.femaleCheckboxData.find(item => item.key === 'C');
    let D = this.femaleCheckboxData.find(item => item.key === 'D');
    let E = this.femaleCheckboxData.find(item => item.key === 'E');
    const setStatus = (v: { key: string; value: boolean; disabled: boolean; } | undefined) => {
      if (v) {
        v.disabled = true;
        v.value = false
      }
    }
    if (arr.includes('A'))
      setStatus(B)
    if (arr.includes('B'))
      setStatus(A)
    if (arr.includes('A') && arr.includes('C'))
      setStatus(D)
    if (arr.includes('D') && arr.includes('E'))
      setStatus(A)
    if (arr.includes('C'))
      setStatus(E)
  }

  checkStep2Data() {
    this.step2Click = true
    if (this.step1Data.isMale === 'Y') {
      return this.maleListSelectedValue.length
    } else {
      return this.femaleCheckboxData.some(obj => obj.value === true);
    }
  }

  getStep2Data() : { data: Step2 } {
    let data: Step2 = {}
    if (this.step1Data.isMale === 'Y') {
      data['maleClothes'] = Utils.deepCopyObject(this.maleListSelectedValue)
    } else {
      let femaleCheckboxData = Utils.deepCopyObject(this.femaleCheckboxData)
      femaleCheckboxData = femaleCheckboxData.filter((item: { value: boolean; }) => item.value === true)
        .map((item: { [x: string]: any; disabled: any; }) => {
          const {disabled, ...rest} = item;
          return rest;
        })
      data['femaleClothes'] = femaleCheckboxData
    }
    return {
      data
    }
  }

  isFormFieldOfType<T extends FormFieldType>(field: FormField, type: T): field is Extract<FormField, { type: T }> {
    return field.type === type;
  }

  changeClothes() {
    const a1 = this.maleDataList.find(item => item.key === 'a1')
    const b2 = this.maleDataList.find(item => item.key === 'b2')
    const init = () => {
      if (a1) a1.disabled = false
      if (b2) b2.disabled = false
    }
    init()
    if (this.maleListSelectedValue.includes('a1')) {
      if (b2) b2.disabled = true
    }
    if (this.maleListSelectedValue.includes('b2')) {
      if (a1) a1.disabled = true
    }
  }

  requireCheckbox() {
    return this.femaleCheckboxData.every(item => item.value === false) && this.step2Click === true
  }
}
